<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<!-- 客户关联 -->
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->
		<!-- 基础公有css -->
		<link rel="stylesheet" href="css/index.css" />
		
		<link rel="stylesheet" href="css/result.css" />


	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">推广返利</span>
					<span class="nav-item">客户关联</span>
				</div>

				<ul class="notice-wrapper">
					<li class="notice-item">说明：客户通过您的推广链接注册/登录衡天云，则与您建立3个月关联。期间产生的新购订单均为有效推广订单。</li>
				</ul>

				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span class="from-title">
							客户关联
						</span>
					</div>
					<div class="timeButton-wrapper  fboxRow">
						<div :class="{'active':activeTimeMethod === 'today'}" @click="handclickChangeQueryTime('today')" class="yzButton mr-20">今天</div>
						<div :class="{'active':activeTimeMethod === 'yesterday'}" @click="handclickChangeQueryTime('yesterday')" class="yzButton mr-20">昨天</div>
						<div :class="{'active':activeTimeMethod === 'sevenday'}" @click="handclickChangeQueryTime('sevenday')" class="yzButton mr-20">近7天</div>
						<div :class="{'active':activeTimeMethod === 'monthly'}" @click="handclickChangeQueryTime('monthly')" class="yzButton mr-20">近30天</div>
						<el-date-picker :class="{'active':activeTimeMethod === 'custom'}" prefix-icon="el-icon-date" value-format="timestamp"
						 @change="changecustomselectTime" v-model="customTimeRange" type="datetimerange" range-separator="至"
						 start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>

					<div class="contact-wrapper fboxRow">
						<div class="contact-item">
							<p class="item-title">
								推广客户数（个）
							</p>
							<p class="item-val">
								{{dataInfo.promoteUserNum}}
							</p>
						</div>
						<div class="contact-item">
							<p class="item-title">
								成交客户数（个）
							</p>
							<p class="item-val">
								{{dataInfo.knockdownUserNum}}
							</p>
						</div>
					</div>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper  noborder">
						<span class="from-title">
							您的客户
						</span>
					</div>
					<el-table class="table" empty-text ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
						<el-table-column label="客户ID" width="auto">
							<template slot-scope="scope">
								{{scope.row.userId ? scope.row.userId : '-'}}
							</template>
						</el-table-column>


						<el-table-column label="客户类型" width="auto">
							<template slot-scope="scope">
								{{scope.row.usertype === 'old' ? '老客户' : (scope.row.usertype === 'new' ? '新客户' : '-') }}
							</template>
						</el-table-column>

						<el-table-column label="关联时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.connectTime ? scope.row.connectTime : '-'}}
							</template>
						</el-table-column>

						<el-table-column label="关联失效时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.connectTimeNoValid ? scope.row.connectTimeNoValid : '-'}}
							</template>
						</el-table-column>

						<el-table-column label="累计有效支付金额" width="auto">
							<template slot-scope="scope">
								{{scope.row.totalpayMoney ?  '¥' + scope.row.totalpayMoney : '-'}}
							</template>
						</el-table-column>

						<el-table-column label="累计产生佣金" width="auto">
							<template slot-scope="scope">
								{{scope.row.totalcommission? '¥ ' + scope.row.totalcommission : '-'}}
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-wrapper">
						<div class="total-wrapper">
							<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
						</el-pagination>
					</div>

				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						//  新增
						activeTimeMethod: 'monthly', // 当前查询推过效果的周期   today 今天；sevenday 近7天；monthly 近30天；custom  自定义查询  
						customTimeRange: [], // 推广查询时间范围
						dataInfo: {
							promoteUserNum:0 , // 推广客户数
							knockdownUserNum:0 , // 成交客户数
						},

						// 表格数据
						tableData: [{
							userId: 'SDC-202144314',  //客户ID
							usertype: 'new',  // 客户类型
							connectTime: '2021-03-09', // 关联时间
							connectTimeNoValid: '2021-09-08', // 关联失效时间
							totalpayMoney: 2000,  // 累计有效支付金额
							totalcommission:1500, //累计产生佣金
						}, {
							userId: 'SDC-202144314',  //客户ID
							usertype: undefined,  // 客户类型
							connectTime: '2021-03-09', // 关联时间
							connectTimeNoValid: '2021-09-08', // 关联失效时间
							totalpayMoney: 2000,  // 累计有效支付金额
							totalcommission:1500, //累计产生佣金
						}, {
							userId: 'SDC-202144314',  //客户ID
							usertype: 'old',  // 客户类型
							connectTime: '2021-03-09', // 关联时间
							connectTimeNoValid: '2021-09-08', // 关联失效时间
							totalpayMoney: 2000,  // 累计有效支付金额
							totalcommission:1500, //累计产生佣金
						}],

						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],


					}
				},

				methods: {
					// 点击更改查询推广效果的周期
					handclickChangeQueryTime: function(key) {
						if (this.activeTimeMethod === key) {
							return
						}
						this.activeTimeMethod = key
						console.log('当前选中的周期为' + this.activeTimeMethod)
					},


					//  改变查询推广效果自定义选择时间
					changecustomselectTime: function(val) {
						if (val === null || val === undefined) {
							console.log('清空自定义查询,此时查询条件自动变为30天')
							this.activeTimeMethod = 'monthly'
						} else {
							this.activeTimeMethod = 'custom'
						}
						console.log(val)
					},

					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},
					// 分页 - 改变一页展示的条目
					handleSizeChange: function(e) {
						console.log(e)
					},
					// 分页 - 当前页数
					handleCurrentChange: function(val) {
						console.log('当前页为' + val)
					},
				},
				mounted: function() {

				}

			})
		</script>
	</body>
</html>
